<#include "/common/layout.ftl">


<@layout >
    <div class="frame-content" style="background: white;height: 100vh;">
        <div class="card">
            <div class="card-body">
                <form id="${formData.name }" class="form-horizontal" action="${formData.submitUrl }"
                      method="${formData.method }" onsubmit="return false;">
                    <#list widgets as wd>
                        <div class="form-group">
                            <label class="col-xs-2 control-label text-right" for="${wd.id }">${wd.label }</label>
                            <div class="col-xs-9">
                                <#if wd.type == 'input'>
                                    <input class="form-control"
                                           type="${wd.text }"
                                           id="${wd.id }"
                                           name="${wd.name }"
                                           placeholder="${wd.placeholder }"
                                           value="${wd.value }"
                                            <#--${(wd.readonly == 'true')?string('readonly','')}-->
                                    >
                                </#if>
                                <#if wd.type == 'textarea'>
                                    <textarea class="form-control"
                                              id="${wd.id }"
                                              name="${wd.name }"
                                              rows="${wd.row }"
                                              placeholder="${wd.placeholder }">${wd.value }</textarea>
                                </#if>
                                <#if wd.type == 'select'>

                                    <select class="form-control select2" data-tree="${wd.tree }"
                                            id="${wd.id }" name="${wd.name }" size="1">
                                        <#list wd.data as op>
                                            <option value="${op.value }" ${(op.selected == 'true')?string('selected','') } ${(wd.tree=='true' && op.parentId != 0)?string('parent="'+op.parentId+'"','')}>${op.label }
                                            </option>
                                        </#list>
                                    </select>
                                </#if>
                                <#if wd.type == 'checkbox' || wd.type == 'radio'>

                                    <#list wd.data as it>
                                        <label class="lyear-${wd.type } ${wd.type }-success ${wd.type }-inline">
                                            <input type="${wd.type }" ${it.checked?string('checked','')} ${it.disabled?string('disabled','')}
                                                   value="${it.value }" name="${wd.name }"><span>${it.label }</span>
                                        </label>
                                    </#list>
                                </#if>
                                <#if wd.type == 'datetime'>
                                    <!--时间选择插件-->
                                    <link rel="stylesheet"
                                          href="${base }static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
                                    <input class="form-control js-datetimepicker" type="text" id="${wd.id }"
                                           name="${wd.name }"
                                           placeholder="${wd.placeholder }"
                                           value="${wd.value }"
                                            ${wd.readonly?string('readonly','')} data-side-by-side="true"
                                           data-locale="zh-cn" data-format="${wd.fmt }"/>

                                    <script src="${base }static/js/bootstrap-datetimepicker/moment.min.js"></script>
                                    <script src="${base }static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
                                    <script src="${base }static/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
                                    <script type="text/javascript">

                                        jQuery('.js-datetimepicker').each(function () {
                                            var $input = jQuery(this);
                                            $input.datetimepicker({
                                                format: $input.data('format') ? $input.data('format') : false,
                                                useCurrent: $input.data('use-current') ? $input.data('use-current') : false,
                                                locale: moment.locale('' + ($input.data('locale') ? $input.data('locale') : '') + ''),
                                                showTodayButton: $input.data('show-today-button') ? $input.data('show-today-button') : false,
                                                showClear: $input.data('show-clear') ? $input.data('show-clear') : false,
                                                showClose: $input.data('show-close') ? $input.data('show-close') : false,
                                                sideBySide: $input.data('side-by-side') ? $input.data('side-by-side') : false,
                                                inline: $input.data('inline') ? $input.data('inline') : false,
                                            });
                                        });
                                    </script>
                                </#if>
                                <#if wd.type == 'date'>
                                    <!--日期选择插件-->
                                    <link rel="stylesheet"
                                          href="${base }static/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
                                    <input class="form-control js-datepicker m-b-10" type="text" id="${wd.id }"
                                           name="${wd.name }"
                                           placeholder="${wd.placeholder }"
                                           value="${wd.value }"
                                            ${wd.readonly?string('readonly','')}
                                           data-date-format="${wd.fmt }"/>
                                <@script>
                                    <script src="${base }static/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
                                    <script src="${base }static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
                                    <script type="text/javascript">

                                        // 日期选择
                                        jQuery('.js-datepicker').each(function () {
                                            var $input = jQuery(this);
                                            $input.datepicker({
                                                weekStart: 1,
                                                autoclose: true,
                                                todayHighlight: true,
                                                language: 'zh-CN',
                                            });
                                        });

                                    </script>
                                </@script>

                                </#if>
                                <#if wd.type == 'checkboxTree'>
                                <input type="text" name="${wd.name }">
                                <ul id="${wd.id }" class="ztree"></ul>
                                    <@style>
                                    <link rel="stylesheet" href="${base }static/extends/ztree/css/ztreestyle/ztree.css" type="text/css">
                                    </@style>
                                    <@script>
                                <script type="text/javascript" src="${base }static/extends/ztree/js/jquery.ztree.core.js"></script>
                                <script type="text/javascript" src="${base }static/extends/ztree/js/jquery.ztree.excheck.js"></script>
                                    </@script>

                                <script type="text/javascript">
                                    var ztree = null;
                                    ztree = $.fn.zTree.init($("#${wd.id }"), {
                                        check: {
                                            enable: true
                                        },
                                        data: {
                                            simpleData: {
                                                enable: true,
                                                pIdKey:'parentId'
                                            }
                                        },
                                        callback: {
                                            onCheck: function () {
                                                var nodes = ztree.getChangeCheckedNodes();
                                                var ids = '';
                                                nodes.forEach(function (e) {
                                                    ids+=e.id +',';
                                                });
                                                ids = ids.substr(0,ids.length-1);
                                               $('[name=${wd.name }]').val(ids);
                                            }
                                        }
                                    }, JSON.parse('${wd.data }'));
                                </script>
                            </#if>
                            </div>
                        </div>
                    </#list>
                    <div class="form-group">
                        <label class="col-xs-2 control-label text-right" for="action">操作</label>
                        <div class="col-xs-9">
                            <button class="btn btn-primary " type="submit">${btnLabel }</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</@layout>

<@script>
    <#if !submit >
        <script type="text/javascript">
            HsUtils.validateFormData('#${formData.name }', JSON.parse('${formData.formRule}'));
        </script>
    <#else >
        <script type="text/javascript">
            $('.select2-tree').select2tree();
            HsUtils.validateForm('#${formData.name }', JSON.parse('${formData.formRule}'), function () {
                setTimeout(function () {
                    HsUtils.closeModal();
                    window.parent.HsUtils.refreshFrame();
                }, 2000);
            });
        </script>
    </#if>
</@script>

